<template>
	<div id='more-coupon' @click.stop='changeCoupon'>
		<el-row :gutter='10' style='height:100%;'>
			<el-col :span='21' >
				<p class='money'>
					￥{{money}}&nbsp;&nbsp;({{condition}})
				</p>
				<p class='con-and-time' style='margin-top:20px;'>
					范围：&nbsp;{{condition}}
				</p>
				<p class='con-and-time'>
					有效期：&nbsp;{{time}}
				</p>
			</el-col>
			<el-col :span='3' :class="{'radio':true,'radio-yes':useConpon,'radio-no':!useConpon}">
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props:['money','condition','time','useConpon','conponStatus'],
		methods:{
			changeCoupon(){
				this.$emit('changeCoupon',this.conponStatus);
			},
		}
	}
</script>

<style scoped>
	#more-coupon{
		position:relative;
		height: 70px;
		padding:20px 1rem;
		border-bottom:1px solid #eee;
	}
	.money{
		font-size:14px;
		font-weight: 600;
	}
	.con-and-time{
		line-height: 20px;
		font-size:12px;
		color:#999;
	}
	.radio-no{
		background:url('../../../static/img/radio-no.png') no-repeat 5px center;
	}
	.radio-yes{
		background:url('../../../static/img/radio-yes.png') no-repeat 5px center;
	}
	.radio{
		height:100%;
		background-size:16px 16px;
	}
</style>